<template>
  <div>
    <div v-html="loginInfo"></div>
    <el-button type="primary" @click="buy(loginUser.id)">查看购物车</el-button>
    <el-button type="primary" @click="this.$router.push('/myOrder')">我的订单</el-button>
    <el-row>
        <el-col :span="3"></el-col>
        <el-col :span="18">
          <el-row>
            <el-col :span="8" style="text-align: center" v-for="product in cutObj.records">
              <img width="200" height="200" :src="'/project/product/'+product.img"><br>
              商品名:{{product.name}}<br>
              单价:{{product.price}}<br>
              售出数量:{{product.saleNum}}<br>
              <el-button type="primary" @click="buy(product.id)">购买</el-button>
            </el-col>
          </el-row>
          <el-pagination
              v-model:current-page="cutObj.current"
              v-model:page-size="cutObj.size"
              background
              layout="prev, pager, next, jumper"
              :total="cutObj.total"
              @current-change="findByItem"
          />
          <el-row>
            <el-col :spm="16"></el-col>
            <el-col :spm="8">
              <el-row>
                <el-col :span="8"> 商品名:<el-col :span="16"></el-col>
                <el-input v-model="findObj.name"></el-input>
                </el-col>
                <el-col :span="8"> 起始日期:<el-col :span="16"></el-col>
                  <el-input v-model="findObj.startDate"></el-input><br>
                </el-col>
                <el-col :span="8"> 结束日期:<el-col :span="16"></el-col>
                 <el-input v-model="findObj.endDate"></el-input><br>
                </el-col>
                <el-button type="primary" @click="findByItem(1)">查询</el-button>
              </el-row>

            </el-col>
          </el-row>

        </el-col>
        <el-col :span="3"></el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      loginInfo:"",
      loginUser:{},
      cutObj:{},
      findObj:{}
    }
  },methods:{
    findByItem(pageNO){
      this.findObj.pageNO=pageNO;
      axios.get("/project/product/findByItem",{params:this.findObj}).then(resp=> {
        this.cutObj = resp.data;
      });
    },
    buy(productId){
      axios.get("/project/shoppingCart/buy",{params:{productId}}).then(resp=> {
        if(resp.data=="ok"){
          this.$router.push("/shop")
        }
        else if (resp.data == "noLogin"){
          this.$router.push("/shopLogin")
        }
      });
    }
  },created() {
    let str = sessionStorage.getItem("loginUser");
    if(str==null){
      this.loginInfo = "你好，请先<a href='/shopLogin'>登录</a>";
    }
    else {
      //字符串转对象
      this.loginUser = JSON.parse(str);
      this.loginInfo='欢迎光临,'+this.loginUser.userName;//属性名，要和controller的形参名一致
    }
    this.findByItem(1);
  }
}
</script>

<style scoped>

</style>